<template>
    <div>
        <header-page></header-page>
        <div class="main-container">
            <div class="ctn-menu-title">
                <h2>财务信息</h2>
            </div>
            <div class="new-abstract-userInfo-container" >
                <div class="content" >
                    <div class="content2">
                        <div class="content-name" v-for="(item,index) in dataList"
                        :key="item.name"
                        :class="{'active':active==index}"
                        @click="btnName(item,index)"
                        >{{ item.name }}</div>

                    </div>

                </div>
                <div class="content3" style="  padding-bottom: 0px;" v-show="headerShow">
                    <div class="yucun">
                        <span style="font-size: 18px;">预存资金信息</span>
                        <div class="chongzhi" @click="btnXiu">充值</div>
                    </div>
                    <div class="yucun-area">
                        <div class="yuacun1">
                            <span class="xian">现金余额</span>
                           <el-tooltip class="item" effect="dark" content="充值、转账、质量调整等剩余现金金额总和。" placement="bottom-start">
                            <div style="display: inline-block;margin-left: 5px;">
                              <i class="icon-help"></i>
                            </div>
                            </el-tooltip>
                            <div class="price">{{dataLists.cashBalance}}元</div>
                        </div>
                        <div class="yuacun1">
                            <span class="xian">优惠余额</span>
                            <el-tooltip class="item" effect="dark" content="框架优惠等剩余金额总和。" placement="bottom-start">
                                <div style="display: inline-block;margin-left: 5px;">
                                  <i class="icon-help"></i>
                                </div>
                                </el-tooltip>
                            <div class="price">{{dataLists.cashBalance}}元</div>
                        </div>
                        <div class="yuacun1">
                            <span class="xian">优惠券余额</span>
                            <el-tooltip class="item" effect="dark" content="客发开户优惠券、加V优惠券、百度推广优惠券等剩余金额总和。" placement="bottom-start">
                                <div style="display: inline-block;margin-left: 5px;">
                                  <i class="icon-help"></i>
                                </div>
                                </el-tooltip>
                            <div class="price">{{dataLists.preferentialBalance}}元</div>
                        </div>
                        <div class="yuacun1">
                            <span class="xian">补偿余额</span>
                            <div class="price">{{dataLists.compensateBalance}}元</div>
                        </div>
                    </div>
                    <div class="yucun-area" style="margin-top: 0;height: 192px;">
                        <div class="yuacun1">
                            <div class="xian2">未开推广费用发票</div>
                            <div class="xian2">未开广告费用发票</div>
                            <div class="xian2" style="display: inline-block;">咨询费余额</div>
                           <el-tooltip class="item" effect="dark" content="咨询费分摊后的剩余金额。" placement="bottom-start">
                            <div style="display: inline-block;margin-left: 5px;">
                              <i class="icon-help"></i>
                            </div>
                            </el-tooltip>
                            <div class="xian2" >风险保证金余额
                                <el-tooltip class="item" effect="dark" content="相关流水请查看“用户风险保证金资金流动”中资金用途为“风险保证金”部分。" placement="bottom-start">
                                    <div style="display: inline-block;margin-left: 5px;">
                                      <i class="icon-help"></i>
                                    </div>
                                    </el-tooltip>

                            </div>

                        </div>
                        <div class="yuacun1">
                            <div class="xian2">{{dataLists.unopenedPromotionInvoice}}元</div>
                            <div class="xian2">{{dataLists.unopenedAdvertisementInvoice}}元</div>
                            <div class="xian2">{{dataLists.consultBalance}}元</div>
                            <div class="xian2" >{{dataLists.riskMarginBalance}}元</div>
                        </div>
                        <div class="yuacun1">
                            <div class="xian2" >已开推广费用发票
                                <el-tooltip class="item" effect="dark" content="相关记录请查看“发票记录”中发票项目为“推广费用”、当前状态为“发票已开具”部分。" placement="bottom-start">
                                    <div style="display: inline-block;margin-left: 5px;">
                                      <i class="icon-help"></i>
                                    </div>
                                    </el-tooltip>

                            </div>
                            <div class="xian2" >
                                已开广告费用发票
                                <el-tooltip class="item" effect="dark" content="相关记录请查看“发票记录”中发票项目为“广告费用”、当前状态为“发票已开具”部分。" placement="bottom-start">
                                    <div style="display: inline-block;margin-left: 5px;">
                                      <i class="icon-help"></i>
                                    </div>
                                    </el-tooltip>

                            </div>
                            <div class="xian2" style="display: inline-block;opacity: 0;">咨询费余额</div>

                            <div class="xian2" >
                                风险保证金冻结余额
                                <el-tooltip class="item" effect="dark" content="相关流水请查看“用户风险保证金资金流动”中资金用途为“风险保证金冻结资金”部分。" placement="bottom-start">
                                    <div style="display: inline-block;margin-left: 5px;">
                                      <i class="icon-help"></i>
                                    </div>
                                    </el-tooltip>

                            </div>

                        </div>
                        <div class="yuacun1">
                            <div class="xian2">{{dataLists.openedPromotionInvoice}}元</div>
                            <div class="xian2">{{dataLists.openedAdvertisementInvoice}}元</div>
                            <div class="xian2" style="opacity: 0;">666.64元</div>
                            <div class="xian2" >{{dataLists.riskMarginFreezeBalance}}元</div>
                        </div>
                        <div class="yuacun1">
                            <div class="xian2" >
                                索要推广费用发票
                                <el-tooltip class="item" effect="dark" content="相关记录请查看“发票记录”中发票项目为“推广费用”、当前状态为“发票已提交请求”部分。" placement="bottom-start">
                                    <div style="display: inline-block;margin-left: 5px;">
                                      <i class="icon-help"></i>
                                    </div>
                                    </el-tooltip>

                            </div>
                            <div class="xian2" >
                                索要广告费用发票
                                <el-tooltip class="item" effect="dark" content="相关记录请查看“发票记录”中发票项目为“广告费用”、当前状态为“发票已提交请求”部分。" placement="bottom-start">
                                    <div style="display: inline-block;margin-left: 5px;">
                                      <i class="icon-help"></i>
                                    </div>
                                    </el-tooltip>

                            </div>




                        </div>
                        <div class="yuacun1">
                            <div class="xian2">{{dataLists.claimPromotionInvoice}}元</div>
                            <div class="xian2" >{{dataLists.claimAdvertisementInvoice}}元</div>
                        </div>
                    </div>
                    <div class="yucun">
                        <span style="font-size: 18px;">透支资金信息</span>

                    </div>
                    <div class="yucun-area" style="border: 0px">
                        <div class="yuacun1">
                            <span class="xian">目前透支总额</span>
                           <el-tooltip class="item" effect="dark" content="当您预算范围内出现余额不足，则可能产生透支消费，欠款将在后续充值余额中自动扣除（或委托区域代理商进行收取）。为避免实际消费超出您的预期，请根据消费情况合理调整预算上限。如有问题，请发送邮件至：ext_fc_budgetbank@baidu.com。" placement="bottom-start">
                            <div style="display: inline-block;margin-left: 5px;">
                              <i class="icon-help"></i>
                            </div>
                            </el-tooltip>

                        </div>
                        <div class="yuacun1" style="width: 112px;">
                            <span class="xian">{{dataLists.overdrawMoney}}元</span>


                        </div>
                        <div class="yuacun1">
                            <span class="xian" @click="btnXiu" style="color:#409eff;cursor: pointer;font-weight: 500">查看透支与还款明细</span>


                        </div>

                        </div>
                    </div>
                    <div class="content3" v-show="headerShow2">
                        <div class="yucun">
                            <span style="font-size: 18px;">预存资金信息</span>

                        </div>
                        <div class="yucun-area">
                            <div class="yuacun1">
                                <span class="xian">现金余额</span>

                                <div class="price">{{dataLists.cashBalance}}元</div>
                            </div>
                            <div class="yuacun1">
                                <span class="xian">优惠余额</span>

                                <div class="price">{{dataLists.preferentialBalance}}元</div>
                            </div>
                            <div class="yuacun1">
                                <span class="xian">补偿余额</span>

                                <div class="price">{{dataLists.compensateBalance}}元</div>
                            </div>

                        </div>
                        <div class="yucun-area" style="margin-top: 0;height: 64px;">
                            <div class="yuacun1">
                                <div class="xian2">资金池总余额</div>
                            </div>
                            <div class="yuacun1">
                                <div class="xian2" style=" font-weight: 400;">{{ dataLists.totalBalance }}元</div>

                            </div>

                        </div>
                        <div class="table-area"  style="width: 100%; border-bottom: 1px solid #ebeef5; padding:0 10px;border-left: 1px solid #ebeef5; border-right: 1px solid #ebeef5;">
                            <el-table
                            :data="tableList"
                            align="center"

                            >
                            <el-table-column
                              prop="name"
                              label="细分资金用途"
                              align="center"
                              min-width="180">
                            </el-table-column>
                            <el-table-column
                              prop="cashBalance"
                              label="现金余额（元）"
                              align="center"
                              min-width="180">
                            </el-table-column>
                            <el-table-column
                              prop="preferentialBalance"
                              align="center"
                              label="优惠余额（元）">
                            </el-table-column>
                            <el-table-column
                            prop="compensateBalance"
                            align="center"
                            label="补偿余额（元）">
                          </el-table-column>
                          <el-table-column
                          prop="totalBalance"
                          align="center"
                          label="资金池总余额（元）">
                        </el-table-column>
                          </el-table>
                        </div>

                    </div>
                    <div class="content3" v-show="headerShow3">
                        <div class="yucun">
                            <span style="font-size: 18px;">预存资金信息</span>

                        </div>
                      <div class="yucun-area">
                        <div class="yuacun1">
                          <span class="xian">现金余额</span>

                          <div class="price">{{dataLists.cashBalance}}元</div>
                        </div>
                        <div class="yuacun1">
                          <span class="xian">优惠余额</span>

                          <div class="price">{{dataLists.preferentialBalance}}元</div>
                        </div>
                        <div class="yuacun1">
                          <span class="xian">补偿余额</span>

                          <div class="price">{{dataLists.compensateBalance}}元</div>
                        </div>

                      </div>
                        <div class="yucun-area" style="margin-top: 0;height: 64px;">
                            <div class="yuacun1">
                                <div class="xian2">资金池总余额</div>
                            </div>
                            <div class="yuacun1">
                              <div class="xian2" style=" font-weight: 400;">{{ dataLists.totalBalance }}元</div>

                            </div>

                        </div>
                        <div class="table-area"  style="width: 100%; border-bottom: 1px solid #ebeef5; padding:0 10px;border-left: 1px solid #ebeef5; border-right: 1px solid #ebeef5;">
                          <el-table
                              :data="tableList"
                              style="width: 100%"
                              align="center"
                          >
                            <el-table-column
                                prop="name"
                                label="细分资金用途"
                                align="center"
                                min-width="180">
                            </el-table-column>
                            <el-table-column
                                prop="cashBalance"
                                label="现金余额（元）"
                                align="center"
                                min-width="180">
                            </el-table-column>
                            <el-table-column
                                prop="preferentialBalance"
                                align="center"
                                label="优惠余额（元）">
                            </el-table-column>
                            <el-table-column
                                prop="compensateBalance"
                                align="center"
                                label="补偿余额（元）">
                            </el-table-column>
                            <el-table-column
                                prop="totalBalance"
                                align="center"
                                label="资金池总余额（元）">
                            </el-table-column>
                          </el-table>
                        </div>

                    </div>


                </div>
               
            </div>
            <div class="footer">
                ©2024 Baidu <a href="https://www.baidu.com/duty/" class="footer2"><div class="baidu2"> 使用百度前必读</div></a> <a href="https://beian.mps.gov.cn/#/query/webSearch" class="footer2">  <div class="baidu2">京公网安备11000002000001号</div> </a> 互联网信息服务许可 我已阅读并接受百度推广服务合同 欢迎访问百度推广政策中心
            </div>
        </div>
 
  
</template>
<script>
import headerPage from './../header/headerPage.vue'
import {getAccountSummary,getCapitalPool,getCapitalPoolList} from '@/services/model/index'
import {getLocalStorageItem} from "@/utils/storage-helper";
import Styles from "@/views/fc/datacenter/styles";
export default{
    name:'caiwuPage',
    data(){
        return{
          userId: getLocalStorageItem('userInfo').userId,
          dataLists:{},
          tableList:[],
            headerDate:[
                {
                    name:'充值管理',
                    listName:[
                        {
                            title:'交纳费用'
                        },
                        {
                            title:'付款记录'
                        }
                    ]
                },
                {
                    name:'发票管理',
                    listName:[
                        {
                            title:'发票记录'
                        },
                        {
                            title:'申请发票'
                        },
                        {
                            title:'更换发票'
                        }
                    ]
                },
                {
                    name:'资金管理',
                    listName:[
                        {
                            title:'资金转账'
                        },
                        {
                            title:'转账记录'
                        },
                        {
                            title:'转账记录'
                        }
                    ]
                },
                {
                    name:'退款管理',
                    listName:[
                        {
                            title:'申请退款'
                        },
                        {
                            title:'查看退款申请'
                        },
                      
                    ]
                }, 
                {
                    name:'信用管理',
                    listName:[
                        {
                            title:'信用账单'
                        },
                    ]
                },
                {
                    name:'保证金管理',
                    listName:[
                        {
                            title:'框架保证金'
                        },
                    ]
                },
                {
                    name:'优惠管理',
                    listName:[
                        {
                            title:'优惠平台'
                        },
                    ]
                },
            ],
            tableData: [
                {
            date: '推广共享资金',
            name: '0.00',
            address: '0.00',
            address2: '0.00',
            address3: '0.00'
          },    {
            date: '合计',
            name: '0.00',
            address: '0.00',
            address2: '0.00',
            address3: '0.00'
          },],
          tableData2: [
                {
            date: '广告共享资金',
            name: '0.00',
            address: '0.00',
            address2: '0.00',
            address3: '0.00'
          },    {
            date: '合计',
            name: '0.00',
            address: '0.00',
            address2: '0.00',
            address3: '0.00'
          },],
            headerShow2:false,
            headerShow3:false,
            headerShow:true,
            active:0,
           dataList:[
            {
                name:'账户汇总'
            },
            {
                name:'推广资金池'
            },
            {
                name:'广告资金池'
            }
           ]
        }
    },
    components:{
      Styles,
        headerPage
    },
    methods:{
        btnZhang2(e){
            console.log(e)
        },
        btnName(item,index){
            this.active=index
            if(index ==0){
                this.headerShow=true,
                this.headerShow2=false,
                this.headerShow3=false
            }else if(index==1){
                this.headerShow=false,
                this.headerShow2=true,
                this.headerShow3=false
            }else{
                this.headerShow=false,
                this.headerShow2=false,
                this.headerShow3=true
            }
          console.log("name",item)
          this.name=item.name
            this.queryList(index,item.name)
        },
        btnXiu(){
            this.$message('服务器繁忙,请稍后重试！');
        },
      async queryList(e,name){
          let action=getAccountSummary
        this.tableList=[]
        let form={userId:this.userId}
        let list=[]
        console.log("queryList--name",this.name)
        if(e){
          action=e==0?getAccountSummary:getCapitalPool
          if(e!==0){
            form={userId:this.userId,capitalType:this.name}
            console.log('this.form',form)
            list=await getCapitalPoolList(form)
            this.tableList=list.data
            let names=e==1?'推广共享资金':'广告共享资金'
            this.tableList.map(x=>{
              x.name=names
            })
          }
        }
        let {data}=await action(form)
console.log(this.tableList)
        this.dataLists=data
        this.dataLists.name='合计'
        this.tableList.push(this.dataLists)
      },
        bobo(){

        }

    },
  mounted() {
      this.queryList()
  }
}
</script>
<style>

body{
    background: #f3f4f8;
    margin: 0;
    padding: 0;
    
}
</style>
<style scoped>
.el-table /deep/th.el-table__cell{
  background: white!important;
  font-weight: 600;
}
.headers{
    display: inline-block;
    margin-top: 7px;
}
.shouye{
    color: #909399;
    position: relative;
    top: -25px;
    font-size:14px
}
.header-img{
    width: 165px;
    margin-left: 28px;
}
.header-left{
    width: 208px;
}
.header-zhong{
   
}
.header-right{
   
    position: absolute;
    right: 30px;
    display: flex;
}
.table-area{

}
.baidu2{
    display: inline-block;
    height: 15px;
}
.baidu2:hover{
    border-bottom: 1px solid #282c33;
}
.footer{
    text-align: center;
    color: #848b99;
    font-size: 12px;
    padding-bottom: 24px;
}
.footer2{
    text-align: center;
    color: #848b99;
    font-size: 12px;
    padding-bottom: 24px; 
   
}
.footer2:hover{
    color: #282c33 !important;

}
.price{
    margin-top: 12px;
  font-weight: 600;
}
.xian{
    color: #333;
    font-weight: 700;
    font-size: 14px;
}
.xian2{
    color: #666;
    font-weight: 700;
    font-size: 14px;
    margin-top: 22px;
}
.yuacun1{
    width: 200px;
   
}
.yucun-area{
    border-bottom: 1px solid #c5ccdb;
    display: flex;
    height: 82px;
    margin-top: 16px;
}
.chongzhi{
    width: 55px;
    height: 26px;
    background: #409eff;
    text-align: center;
    font-size: 14px;
    line-height: 26px;
    color: white;
    cursor: pointer;
    display: inline-block;
    margin-left: 28px;
}
.yucun{
    padding-top: 18px;
}
.content3{
    width: 97%;
    margin: 0 auto;
    padding-bottom: 30px;
}
.active{
    color: #409eff;
    border-bottom: 1px solid #409eff;
}
.content2{
    display: flex;
    position: relative;
    left: -18px;
}
.content-name{
    margin-left: 46px;
    cursor: pointer;
    font-size: 14px;
}
.content{
   
    margin: 0 auto;
    line-height: 60px;
    background: white;
    border-bottom: 1px solid #c5ccdb;
}
.new-abstract-userInfo-container{
    /* padding: 24px; */
    background: #fff;
   
    position: relative;
}
.main-container{
    position: relative;
    min-height: calc(100vh - 128px);
    box-sizing: border-box;
    padding: 24px 30px 0;
    padding-bottom: 30px;
}
.ctn-menu-title{
    background-color: #fff;
    border-radius: 5px;
    padding: 24px;
    margin-bottom: 24px;
}
.ctn-menu-title h2 {
    margin: 0;
    font-size: 20px;
    color: #000;
    font-weight: initial;
}
.header{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 64px;
    box-sizing: border-box;
    display: flex;
align-items: center;
position: relative;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03), 0 3px 9px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(0, 0, 0, 0.01);
}
i.icon-help {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  background: url(	'https://caiwu.baidu.com/assets/img/c6a64eaaab9659aaa103.png') no-repeat;
  background-position: 50%;
  background-size: contain;
}

</style>
